<template>
    <view class="page-container">
        <!-- 头部组件 -->

        <!-- 主分类标签 - 新增接单订单/我的发布 -->
        <view class="main-tabs">
            <view class="main-tab-item" :class="{ active: currentMainTab === 'receive' }"
                @click="switchMainTab('receive')">接单订单</view>
            <view class="main-tab-item" :class="{ active: currentMainTab === 'my_posts' }"
                @click="switchMainTab('my_posts')">我的发布</view>
        </view>

        <!-- 订单状态标签页 -->
        <view class="order-tabs">
            <!-- 公共标签 - 全部 -->
            <view class="tab-item" :class="{ active: currentTab === 'all' }" @click="switchTab('all')">全部</view>

            <!-- 我的发布特有标签 -->
            <template v-if="currentMainTab === 'my_posts'">
                <view class="tab-item" :class="{ active: currentTab === 'pending' }" @click="switchTab('pending')">待接单</view>
                <view class="tab-item" :class="{ active: currentTab === 'accepted' }" @click="switchTab('accepted')">已接单</view>
                <view class="tab-item" :class="{ active: currentTab === 'inProgress' }" @click="switchTab('inProgress')">进行中</view>
                <view class="tab-item" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">已结束</view>
                <view class="tab-item" :class="{ active: currentTab === 'cancelled' }" @click="switchTab('cancelled')">已取消</view>
            </template>

            <!-- 接单订单特有标签 -->
            <template v-else>
                <view class="tab-item" :class="{ active: currentTab === 'inProgress' }" @click="switchTab('inProgress')">进行中</view>
                <view class="tab-item" :class="{ active: currentTab === 'accepted' }" @click="switchTab('accepted')">已接单</view>
                <view class="tab-item" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">已结束</view>
                <view class="tab-item" :class="{ active: currentTab === 'cancelled' }" @click="switchTab('cancelled')">已取消</view>
            </template>
        </view>

        <!-- 订单列表 -->
        <view class="order-list">
            <view class="order-item" v-for="(order, index) in orders" :key="order.order_id">
                <!-- 订单状态标签 -->
                <view :class="['order-status', getStatusClass(order.status)]">{{ order.status_text ||
                    getStatusText(order.status) }}</view>

                <view class="order-content">
                    <view class="order-header">
                        <image :src="getFullImageUrl(order.status_image)" class="status_image"></image>
                        <text class="order-title">{{ order.title }}</text>
                    </view>

                    <view class="order-info">
                        <view class="info-row">
                            <text class="people-info">{{ order.people_num }}</text>
                            <text class="people-info"> {{ order.person_info }}</text>
                            <text class="people-info">{{ order.time_range }}</text>
                            <view class="people-info">{{ order.skill_desc }}</view>
                        </view>
                    </view>

                    <view class="order-location">
                        <uni-icons type="location-filled" size="16"></uni-icons>
                        <text>{{ order.address }}</text>
                      
                    </view>
                    <view class="order-location">
                        <text>{{ order.distance_info }}</text>
                        <image :src="getFullImageUrl('@/static/release/dh.png')" class="nav-btn" @click="gotoNavigation(order)"></image>
                    </view>
                      <view class="match-tip"  v-if="order.match_tip">{{order.match_tip}}</view>
                    <!-- 订单底部信息 -->
                    <view class="order-footer">
                        <view class="order-salary">酬金: {{ order.salary }}</view>
                        <view class="order-actions">
                            <!-- 发布订单特有操作 -->
                            <template v-if="currentMainTab === 'my_posts'">
                                <!-- 待接单状态 -->
                                <view v-if="order.status === JOB_STATUS.PENDING" class="publish-actions">
                                    <button class="modify-btn" @click="() => modifyOrder(order)">修改内容</button>
                                    <button class="select-btn"  @click="() => selectFriend(order)">选择顾友</button>
                                </view>
                                <!-- 已接单状态 -->
                                <view v-if="order.status === JOB_STATUS.ACCEPTED" class="action-buttons">
                                     <view class="top-actions">
                                        <button class="cancel-btn" @click="cancelOrder(order.order_id)">取消订单</button>
                                        <button class="chat-btn" @click="gotoChat(order)">聊详情</button>
                                    </view>
                                </view>
                                <!-- 已完成状态 -->
                                <button class="comment-btn" v-if="order.status === JOB_STATUS.COMPLETED"
                                    @click="gotoComment(order)">去评论</button>
                                <!-- 已取消状态 -->
                                <view class="compensation" v-if="order.status === JOB_STATUS.CANCELED">
                                    <text>{{ order.cancel_msg }}</text>
                                </view>
                            </template>

                            <!-- 接单订单原有操作 -->
                            <template v-else>
                                <!-- 已接单和进行中状态 - 统一按钮布局 -->
                                <view v-if="order.status === ORDER_STATUS.ACCEPTED || order.status === ORDER_STATUS.IN_PROGRESS" class="action-buttons">
                                    <view class="top-actions">
                                        <button class="cancel-btn" @click="cancelOrder(order.order_id)">取消订单</button>
                                        <button class="chat-btn" @click="gotoChat(order)">聊详情</button>
                                    </view>
                                    <!-- 仅进行中状态显示滑动完成区域 -->
                                    <view class="slide-btn" v-if="order.status === 2">
                                        <movable-area class="slide-btn__area" :ref="'area_' + order.order_id" :class="'slide-btn__area-' + order.order_id">
                                            <movable-view 
                                                class="slide-btn__thumb" 
                                                direction="horizontal"  
                                                :x="order.thumbX"         
                                                @change="onSlide($event, order)"   
                                                :disabled="order.isDisabled"
                                                :max-x="order.maxX" 
                                            >
                                                完成订单<image src="../../../static/image/xz11.png" class="right-icon"/>
                                            </movable-view>
                                            <image src="../../../static/image/xz12.png" class="right-icon-mo"/>
                                        </movable-area>
                                    </view>
                                </view>

                                <!-- 已完成状态 -->
                                <button class="comment-btn" v-if="order.status === 4"
                                    @click="gotoComment(order)">去评论</button>

                                <!-- 取消状态 -->
                                <view class="compensation" v-if="order.status === 5">
                                    <text>{{ order.cancel_msg }}</text>
                                </view>
                            </template>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-if="orders.length === 0">
                <image src="/static/image/logo.jpg" class="empty-icon"></image>
                <text class="empty-text">当前暂无订单</text>
            </view>
        </view>

        <!-- 添加RecruitModal组件 -->
        <RecruitModal
            :show="showRecruitModal"
            :order="selectedOrder"
            @close="closeRecruitModal"
        />
    </view>
</template>

<script>
import RecruitModal from '@/components/common/RecruitModal.vue';
import orderCenter from './orderCenter.js';
import { ORDER_STATUS, JOB_STATUS } from '../../../utils/status';


export default {
    ...orderCenter,
    components: {
        ...orderCenter.components,
        RecruitModal
    },
    data() {
        return {
            ...orderCenter.data(),
            showRecruitModal: false,
            selectedOrder: null
        };
    },
    methods: {
        ...orderCenter.methods,
        closeRecruitModal() {
            this.showRecruitModal = false;
            this.selectedOrder = null;
        }
    }
};
</script>
<style lang="scss" src="./orderCenter.scss"></style>